<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		:root {
			--fireColor1: #ff5000;
			--fireColor2: rgba(255, 80, 0, 0);
			--fireDuration: 1s;
			--blur: 0.4px;
			--fireSize: 90px;
			--smogColor1: rgb(49, 48, 48);
			--smogColor2: rgba(255, 80, 0, 0);
			--smogDuration: 2s;
			--smogSize: 120px;
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		html,
		body,
		#scene {
			width: 100%;
			height: 100%;
		}

		body {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background: rgb(0, 0, 0);
		}

		h1 {
			width: 100%;
			font-size: 50px;
			text-align: center;
			color: white;
			font-family: 'Italiana', serif;
			font-family: 'Julius Sans One'
		}

		#scene {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

		#fire-container,
		#smog-container {
			font-size: 24px;
			filter: blur(var(--blur));
			-webkit-filter: blur(var(--blur));
			position: relative;
			width: 10em;
			height: 12em;
		}

		#fire-container .particle {
			animation: rise var(--fireDuration) ease-in infinite;
			background-image: radial-gradient(var(--fireColor1) 30%, var(--fireColor2) 70%);
			border-radius: 50%;
			mix-blend-mode: screen;
			opacity: 0;
			position: absolute;
			bottom: 0;
			width: var(--fireSize);
			height: var(--fireSize);
		}

		#smog-container .particle {
			animation: rise var(--smogDuration) ease-in infinite;
			background-image: radial-gradient(var(--smogColor1) 30%, var(--smogColor2) 70%);
			border-radius: 50%;
			mix-blend-mode: screen;
			opacity: 0;
			position: absolute;
			bottom: 0;
			width: var(--smogSize);
			height: var(--smogSize);
		}

		#buttons {
			display: flex;
			position: relative;
			justify-content: center;

		}

		button {
			margin: 10px;
			width: 200px;
			height: 50px;
			border-radius: 30px;
			position: absolute;
			bottom: 0px;
			font-weight: 900;
			border: none;
			font-size: 20px;
			cursor: pointer;
			font-family: system-ui;
			-webkit-box-shadow: 0px 15px 24px -9px rgba(255, 255, 255, 0.2);
			box-shadow: 0px 15px 24px -9px rgba(255, 255, 255, 0.2);
		}

		#yeah,
		#nah {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		#confirm {
			background-color: #fd6408;
			color: #313131;
			transition: all 0.8s;
		}

		#confirm:hover {
			background-color: rgba(255, 255, 255, 0);
			box-shadow: none;
			color: #fd6408;
		}

		#nah {
			position: relative;
			width: 300px;
			min-height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		#cancel {
			background-color: #e9e9e9;
			color: #313131;
			transition: all 0.8s;
		}

		#cancel:hover {
			background-color: rgba(255, 255, 255, 0);
			box-shadow: none;
			color: #ffffff;
		}

		@keyframes rise {
			from {
				opacity: 0;
				transform: translateY(0) scale(1);
			}

			25% {
				opacity: 1;
			}

			to {
				opacity: 0;
				transform: translateY(-10em) scale(0);
			}
		}

		@keyframes fly-away {
			0% {
				opacity: 1;
				filter: blur(1px);
			}

			100% {
				transform: scale(0.3);
				opacity: 0;
				filter: blur(20px);
				border-radius: 50%;
			}
		}

		/* 
		img {
			position: fixed;
			min-width: 100%;
			height: 100%;
			object-fit: cover;
			opacity: 0.2;
		} */
	</style>
	<body>
		<div id="scene">
			<h1>火焰按钮</p>
				<div id="buttons-container">
					<div id="buttons">
						<div id="yeah">
							<div id="fire-container"></div>
							<button id="confirm" type="button">确定</button>
						</div>

						<div id="nah">
							<div id="smog-container"></div>

							<button id="cancel" type="button">取消</button>
						</div>
					</div>
				</div>
		</div>
	</body>
	<script>
		let fireContainer = document.getElementById("fire-container");
		let smogContainer = document.getElementById("smog-container");

		function createParticles(fireContainer, num, leftSpacing) {
			for (let i = 0; i < num; i += 1) {
				let particle = document.createElement("div");
				particle.style.left = `calc((100% - 5em) * ${i / leftSpacing })`;
				particle.setAttribute("class", "particle");
				particle.style.animationDelay = 4 * Math.random() + "s";
				fireContainer.appendChild(particle);
			}
		}

		createParticles(fireContainer, 60, 60);
		createParticles(smogContainer, 30, 30);
	</script>
</html>
